.detail {
 .header-wrap {
  .cover-wrap {
   position: relative;
   .cartoon-info{
    position: absolute;
    bottom: 100rpx;
    left: 50rpx;
    .title{
     font-size: 40rpx;
     color: #ffff;
     z-index: 10;
     font-weight: 600;
    }
   }

   .img-item {
    width: 100%;
   }

  }

  .info-wrap {
   margin-top: 30rpx;
   display: flex;
   align-items: center;
   padding: 0 20rpx;

   .read-btn {
    margin-right: 30rpx;
   }

   .custom-class {
    flex: 1;

    button {
     width: 90%;
    }
   }
  }
 }

 .content-wrap {
  margin-top: 40rpx;
  padding: 30rpx;

  .introduction {
   padding-top: 20rpx;
   font-size: 28rpx;
  }

  .head-box {
   position: relative;
   // top: 30rpx;
   display: flex;
   justify-content: space-between;
   font-size: 24rpx;
   color: rgb(153,153,153);
   height: 100rpx;
   line-height: 100rpx;
   // background-color: red;
   padding-right: 20rpx;
  }

  .directory {
   position: relative;
   top: 20rpx;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
  }

  .chapter-item {
   margin: 0 30rpx 40rpx 0;
   width: calc(80% / 4);
   min-width: calc(80% / 4);
   max-width: calc(80% / 4);
   background-color: rgb(245, 243, 239);
   text-align: center;
   padding: 20rpx 0;
   font-size: 24rpx;

   &:nth-child(4n) {
    margin-right: 0;
   }

   img {
    width: 200rpx;
    height: 200rpx;
   }
  }
 }
}